<template>
  <x-form v-model="formData" :config="formConfig">
    <template #creditPlanPoint>
      <el-input type="textarea" style="width: 100%;"></el-input>
    </template>
    <template #projectDetailsTable="{ config }">
      <x-table
          v-model="searchData"
          :config="config"
          :data="tableData"
          :page="page">
      </x-table>
    </template>
  </x-form>
</template>

<script>

import mixin from "@/form/mixin";

export default {
  name: "ExampleForm",
  mixins: [mixin],

  data() {
    return {
      formData: {
        bankName: '中国银行股份有限公司',
        isFirstCooperation: '否',
        cooperationModel: '非总对总',
        guaranteeModel: '见贷即保',
        lineOfCredit: 100000,
        creditPeriod: '2年',
        bankSubInsuranceRatio: '20.00%',
        isCollectReserve: '否',
        singleLimit: '1,000万元',
        singleAccountLimit: '1,000万元',
        compensationControlMethod: '累计代偿金额≤产品项下出保担保责任金额合计*X',
        compensationControlRatio: '3.0%',
        base: {
          bankName: '中国银行股份有限公司',
          isFirstCooperation: '否',
          cooperationModel: '非总对总',
          guaranteeModel: '见贷即保',
          lineOfCredit: 100000,
          creditPeriod: '2年',
          bankSubInsuranceRatio: '20.00%',
          isCollectReserve: '否',
          singleLimit: '1,000万元',
          singleAccountLimit: '1,000万元',
          compensationControlMethod: '累计代偿金额≤产品项下出保担保责任金额合计*X',
          compensationControlRatio: '3.0%',
        },
        card: {
          creditPlanPoint: 'aa'
        }
      },

      treeData: [{
        id: '1',
        name: 'xx公司',
        children: [
          {
            id: '2',
            name: '技术部',
            children: [
              { id: '4', name: 'Java 组' },
              { id: '5', name: 'Web 组' },
              { id: '6', name: 'PHP 组' },
              { id: '7', name: 'Python 组' }
            ]
          },
          { id: '3', name: '售后部' }
        ]
      }],
      //子表单配置数据
      loading: false,
      tableData: [
        { name: '张三', sex: 'male', phone: 13222222222 },
        { name: '李四', sex: 'female', phone: 13222222222 },
        { name: '王二', sex: 'male', phone: 13222222222 },
        { name: '麻子', sex: 'female', phone: 13222222222 }
      ],
      page: {
        pageSizes: [10, 20],
        pageSize: 10,
        pageNum: 1,
        total: 4
      },
      searchData: {},
    }
  },

  computed: {

  },

  methods: {
    formConfigProvide() {
      const _this = this
      return {
        xType: 'form',
        name: 'form',
        label: '产品授信方案测试表单',
        labelWidth: '140px',
        show: true,
        item: [
          {
            xType: 'input',
            name: 'productCreditNumber',
            label: '产品授信方案编号',
            show: true,
            rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
            colSpan: 12
          },
          {
            xType: 'input',
            name: 'bankName',
            show: true,
            label: '合作银行',
            rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
            colSpan: 12
          },
          {
            xType: 'input',
            name: 'cooperationModel',
            show: true,
            label: '合作模式',
            rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
            colSpan: 12
          },
          {
            xType: 'input',
            name: 'guaranteeModel',
            show: true,
            label: '担保模式',
            rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
            colSpan: 12
          },
          {
            xType: 'input',
            name: 'lineOfCredit',
            show: true,
            label: '授信总金额',
            rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
            colSpan: 12
          },
          {
            xType: 'input',
            name: 'creditPeriod',
            show: true,
            label: '授信期限',
            rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
            colSpan: 12
          },
          {
            xType: 'input',
            name: 'singleLimit',
            show: true,
            label: '单笔限额',
            rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
            colSpan: 12
          },
          {
            xType: 'input',
            name: 'singleAccountLimit',
            show: true,
            label: '单户限额',
            rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
            colSpan: 12
          },
          {
            xType: 'input',
            name: 'compensationControlMethod',
            show: true,
            label: '代偿控制方式',
            rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
            colSpan: 12
          },
          {
            xType: 'input',
            name: 'compensationControlRatio',
            show: true,
            label: '代偿控制比例',
            rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
            colSpan: 12
          },
          {
            xType: 'card',
            shadow: 'never',
            name: 'base',
            label: '基础表单',
            labelWidth: '140px',
            show: true,
            item: [
              {
                xType: 'input',
                name: 'productCreditNumber',
                label: '产品授信方案编号',
                show: true,
                rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
                colSpan: 12
              },
              {
                xType: 'input',
                name: 'bankName',
                show: true,
                label: '合作银行',
                rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
                colSpan: 12
              },
              {
                xType: 'input',
                name: 'cooperationModel',
                show: true,
                label: '合作模式',
                rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
                colSpan: 12
              },
              {
                xType: 'input',
                name: 'guaranteeModel',
                show: true,
                label: '担保模式',
                rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
                colSpan: 12
              },
              {
                xType: 'input',
                name: 'lineOfCredit',
                show: true,
                label: '授信总金额',
                rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
                colSpan: 12
              },
              {
                xType: 'input',
                name: 'creditPeriod',
                show: true,
                label: '授信期限',
                rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
                colSpan: 12
              },
              {
                xType: 'input',
                name: 'singleLimit',
                show: true,
                label: '单笔限额',
                rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
                colSpan: 12
              },
              {
                xType: 'input',
                name: 'singleAccountLimit',
                show: true,
                label: '单户限额',
                rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
                colSpan: 12
              },
              {
                xType: 'input',
                name: 'compensationControlMethod',
                show: true,
                label: '代偿控制方式',
                rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
                colSpan: 12
              },
              {
                xType: 'input',
                name: 'compensationControlRatio',
                show: true,
                label: '代偿控制比例',
                rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
                colSpan: 12
              },
            ]
          },
          {
            xType: 'card',
            shadow: 'never',
            name: 'card',
            label: '产品授信方案要点',
            show: true,
            item: [
              {
                slot: 'creditPlanPoint',
                name: 'creditPlanPoint',
                label: '产品授信方案要点',
                show: true,
                colSpan: 24
              },
            ]
          },
          {
            xType: 'card',
            shadow: 'never',
            name: 'creditPlanPoint',
            label: '项目详情',
            show: true,
            item: [
              {
                slot: 'projectDetailsTable',
                name: 'projectDetails',
                label: '项目详情',
                xType: 'table',
                show: true,
                stripe: true,
                column: [
                  {label: '序号',  type: 'index', show: true},
                  {label: '债务人名称',  name: 'name', show: true},
                  {label: '创建时间', name: 'name2', show: false},
                  {label: '项目经理',  name: 'sex', show: true},
                  {label: '项目状态',  name: 'sex', show: true},
                  {label: '部门名称',  name: 'sex', show: true},
                  {label: '机构名称', name: 'phone', show: true, formatter: (row, column, cellValue, index) => '+86 ' + cellValue},
                ],
                operate: [
                  { text: '编辑', type: 'text', show: true, click: () => console.log('编辑') },
                  { text: '详情', type: 'text', show: true, click: (row, index) => console.log(row, index) },
                  { text: '删除', type: 'text', show: true, click: (row, index) => console.log(row, index) },
                ]
              }
            ]
          }
        ]
      }
    },
  }
}
</script>

<style scoped>

</style>
